<!--
 * @Author: wangming
 * @Date: 2021-11-02 17:14:52
 * @LastEditors: wangming
 * @LastEditTime: 2022-05-10 18:02:43
 * @FilePath: /hanma-paas-mobile-fed/Users/wm/瀚川/hanma-application-designer-fed/src/components/Imagepreview/template.vue
 * @Description: 
-->
<template>
  <image-viewer
    :z-index="3000"
    :initial-index="imageIndex"
    v-if="showViewer"
    :on-close="closeViewer"
    :url-list="previewSrcList"
    ref="viewer"
  >
  </image-viewer>
</template>

<script>
import ImageViewer from "./image-viewer";
export default {
  data() {
    return {
      showViewer: false,
      previewSrcList: [],
      imageIndex: 0,
      prevOverflow: null,
    };
  },
  components: {
    ImageViewer,
  },
  created() {},
  mounted() {},
  methods: {
    async clickHandler({ previewSrcList, imageIndex, scale }) {
      // prevent body scroll
      this.previewSrcList = previewSrcList;
      this.imageIndex = imageIndex || 0;
      this.prevOverflow = document.body.style.overflow;
      document.body.style.overflow = "hidden";
      this.showViewer = true;
      await this.$nextTick();
      this.$refs.viewer.deviceSupportInstall({ scale: scale || 1 });
    },
    closeViewer() {
      document.body.style.overflow = this.prevOverflow;
      this.showViewer = false;
    },
  },
};
</script>

<style scoped lang="scss">
</style>
